import { SelectProps } from "antd"
import { FC, useEffect, useState } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useLocale } from "@/locales"

const OperationPage: FC<any> = ({
	label = "common.action_module",
	rules,
	selectorProps,
	options: optionsProp = [],
	labelProps
}) => {
	const { newFormat } = useLocale()
	const [options, setOptions] = useState<SelectProps["options"]>([
		{ value: 1, label: newFormat("routes.game.venue_manage") },
		{ value: 2, label: newFormat("routes.game.venue_access_manage") }
	])

	useEffect(() => {
		if (optionsProp.length) {
			setOptions(optionsProp.map((item: string) => ({ value: item, label: item })))
		}
	}, [optionsProp])

	return (
		<SFormItem colon name={"operationPage"} label={newFormat(label)} rules={rules} {...labelProps}>
			<StyleSelect allowClear placeholder={newFormat("common.select_all")} options={options} {...selectorProps} />
		</SFormItem>
	)
}

export default OperationPage
